Day 10 - [Part 1] Cascading & 樣式規則

14th鐵人賽

Casey

2022-09-14 22:08:44

450 瀏覽

分享至

Cascading

為 Interview Bit 的第 23 題。

因內容較多，Cascading 為 Part 1，樣式規則為 Part 2。

CSS 全名叫做 Cascading Style Sheets，那麼 Cascading 是什麼意思呢?

因為一個 HTML 檔案可能使用多個 stylesheet，所以我們必須要知道哪一個元素使用哪一個 stylesheet。假設現在有一個 div，其中有一個 stylesheet 指定這一個 div 的背景色為紅色，但是另外一個 stylesheet 卻指定這一個 div 的背景色為藍色，那麼就會衝突到了，因為 div自己不知道要使用藍色還是紅色。

/*a-styles.css*/
div {
  background-color: red;
}

/*b-styles.css*/
div {
  background-color: blue;
}

當有衝突時，瀏覽器就會跳出來幫元素決定使用哪一個 stylesheet，瀏覽器用來解決衝突的規則就是 Cascading。以下面的 HTML來說，因為瀏覽器是從上讀到下，如果元素的 CSS 有衝突到， b-styles.css會覆蓋 a-styles.css的樣式，所以下面範例的 <div> 背景色會是藍色。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
  <link rel="stylesheet" href="a-styles.css">
  <link rel="stylesheet" href="b-styles.css">
<body>
  <div class="box">Hello world!</div>

</body>
</html>